<template>
    <div class='search-box'>
        <van-nav-bar left-arrow right-text="搜索" @click-right="searchSong" @send="searchHis" @click-left="$router.go(-1)">
            <template #title>
                <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="$emit('update:isshow', true)" />
            </template>
        </van-nav-bar>
    </div>
</template>

<script>
import { getSearch } from '@/api/';
export default {
    name: 'search-box',
    data() {
        return {
            value: '',
            searchList: [],
            hist: []
        }
    },
    computed: {},
    components: {},
    created() { },
    mounted() { },
    props: {
        isshow: {
            default: true,
            type: Boolean
        }
    },
    beforeMount() {
        let his = JSON.parse(localStorage.getItem('Searchhistory'))
        if (!his) {
            let obj = []
            localStorage.setItem('Searchhistory', JSON.stringify(obj))
        }
        this.$bus.$on('send', (v) => {
            this.value = v
            this.searchSong()
        })
    },
    methods: {
        async searchSong() {
            if (!this.value) {
                var { data } = await getSearch()
            } else {
                var { data } = await getSearch(this.value)
            }
            let his = JSON.parse(localStorage.getItem('Searchhistory'))
            if ((!his.some((v) => {
                return v == this.value
            })) && this.value) {
                if (his.length < 6) {
                    his.unshift(this.value)
                    localStorage.setItem('Searchhistory', JSON.stringify(his))
                } else {
                    his.pop(1)
                    his.unshift(this.value)
                    this.hist = his
                    localStorage.setItem('Searchhistory', JSON.stringify(his))
                }
            }
            this.searchList = data.result.songs
            this.$emit('click', this.searchList);
        },
        searchHis() {
            this.$emit('send', this.hist)
            console.log(this.hist);
        }
    },
}
</script>
<style scoped>
.search {
    background: #efefef;
    height: 100vh;
}

.van-nav-bar {
    background: #eee;
}

.van-search {
    background: #eee;
}

::v-deep .van-grid-item__content {
    background: #eee;
}
</style>
